<template>
  <div class="bank">
    <div class="bank_top">
      <!-- <div class="bank_inline">
        <span class="bank_search"
          ><el-input v-model="input" placeholder="搜索人员"></el-input
        ></span>
      </div> -->
      <div class="bank_selet" v-show="this.multipleSelection.length != 0">
        <span>
          <el-select
            v-model="value"
            :placeholder="cipplaceholder"
            @change="del"
          >
            <el-option key="删除" label="删除" value="删除">
            </el-option> </el-select ></span>
      </div>
    </div>  

    <div class="bank_cent">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="multipleTable"
        :header-cell-style="{ background: '#F0F0F0' }"
      >
        <el-table-column
          type="index"
          width="290"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column align="center" label="区名" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="完成考试"
              placement="top"
              v-if="scope.row.areaDtoList.length != 0"
            >
              <p style="color:red;" >
                {{ scope.row.areaName }}
              </p>
            </el-tooltip>
            <p v-else>{{ scope.row.areaName }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              icon="el-icon-s-promotion"
              type="primary"
              @click="examDetail(scope.row.areaDtoList)"
              >矿山详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagina">
        <el-pagination
          @size-change="handleSelectionChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 10]"
          :page-size="question.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
    </div>
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose"
      :title="'人员考试明细'"
    >
    <el-table
        :data="dialogData"
        style="width: 100%"
        ref="multipleTables"
        :header-cell-style="{ background: '#F0F0F0' }"
      >
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column align="center" prop="nickName" label="考试人员">
        </el-table-column>
        <el-table-column align="center" prop="maxScore" label="最高分数">
          <template slot-scope="scope">
            {{(scope.row.maxScore == null?0:scope.row.maxScore)}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="是否通过">
          <template slot-scope="scope">
            {{scope.row.passed?"通过":"未通过"}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="address" label="操作">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-s-promotion" type="primary"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
  </div>
</template>

<script>
import { examaMemberGetList } from "@/api/bank";
export default {
  data() {
    return {
      input: "",
      currentPage: 1,
      dialogVisible: false,
      ruleForm: {
        name: "",
        remarks: "",
      },
      rules: {
        name: [
          { required: true, message: "题库名称不能为空", trigger: "blur" },
        ],
      },
      tableData: [],
      dialogData: [],
      multipleSelection: [],
      value: "",
      question: {
        pageSize: 10,
        currentPage: 1,
        id: null,
      },
      total: 0,
    };
  },
  computed: {
    cipplaceholder() {
      return this.multipleSelection.length
        ? `已选${this.multipleSelection.length}项`
        : "111";
    },
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let res = await examaMemberGetList({ examId: this.$route.params.id });
      this.tableData = res.data;
      console.log(res);
    },
    del(e) {
      this.value = "";
      this.$confirm("确实要删除吗??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    examDetail(data) {
      console.log(data);
      // this.dialogData = data;
      // this.dialogVisible = true;
      this.$store.state.mineExam = data;
      this.$router.push("/modify/mineExam");
    },
    handleClose() {
      this.dialogVisible = false;
     
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange() {
      console.log(1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.bank {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 10px 10px;
  .bank_top {
    width: 100%;
    .bank_inline {
      width: 100%;
      .bank_search {
        width: 200px;
        display: inline-block;
        margin-bottom: 10px;
      }
    }
  }
  .bank_selet {
    span {
      width: 130px;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
  .bank_cent {
    width: 100%;
    margin-top: 10px;
    .pagina {
      margin-top: 50px;
    }
  }
}
.listTitle {
  text-align: left;
  font-weight: 700;
  color: #999;
}
</style>
